<template>
	<view class="emain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}"  ><!--  -->
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}" ><!--  -->
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="colorfff">编辑搭子卡</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="px-1 mt-6 pb-5">
			<view class="px-3 pt-3 pb-5" style="background-color: #15325B;border-radius: 36rpx;">
				<view class="d-flex d-flex-middle mb-5">
					<image class="rounded mr-1" :src="gameIcon" style="width: 30rpx;height: 30rpx;"></image>
					<text class="colorfff font26">{{gameName}}</text>
				</view>
				<view style="margin-bottom: 55rpx;">
					<textarea class="font50 font-bold colorfff" maxlength="50" style="width: 670rpx;" v-model="textareaContent" placeholder="填写您的交友宣言, 例 00 女,想找一个男生组队,情绪稳定随时能打,拒绝次抛队友,玩的滴滴"></textarea>
				</view>
				<view class="p-2 d-flex d-flex-middle position-relative mb-4" style="background: #1e3767;border-radius: 30rpx;height: 200rpx;">
					<view class="mr-4 d-flex d-flex-center d-flex-middle" style="width: 250rpx;height: 200rpx;">
						<view class="charts-box">
						  <qiun-data-charts 
						    type="radar"
							:reshow="true"
						    :opts="opts"
						    :chartData="chartData"
						  />
						</view>
					</view>
					<view class="d-flex d-flex-column">
						<view class="font-bold color739bce mb-1">{{character? this.topic : '测一测我的交友战力！'}}</view>
						<view class="font22 color597bac text-clamp-three" style="margin-bottom: 25rpx;">{{character? character : '重新测评在72小时后，请认真填写哦'}}</view>
						<view v-if="!character" class="bgC7C8C9 rounded30 d-flex d-flex-middle" @click="gotoTestPage">
							<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/edite1088.png" style="width: 58rpx;height: 58rpx;"></image>
							<text class="colorfff font22">立即测试</text>
						</view>
					</view>
				</view>
				<view class="d-flex d-flex-baseline mb-2">
					<text class="font32 colorfff mr-2">添加照片</text>
					<text class="font22 colorg7">晒出最能代表你特点的照片吧！</text>
				</view>
				<view class="d-flex d-flex-between mb-4">
					<view class="plus-img d-flex d-flex-center d-flex-middle" style="position: relative;"  @click="addimg(1)">
						<image v-if="img1" class="plus-img" :src="img1"  mode="aspectFill"></image>
						<view v-if="img1" class="delete-btn"  @click.stop="removeImage(1)" ><image style="    width: 40rpx;height: 41rpx;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" ></image></view>
						<text v-else  class="iconfont icon-jia1 "></text>
						
						
					</view>
					<view class="plus-img d-flex d-flex-center d-flex-middle" style="position: relative;" @click="addimg(2)">
						<image  v-if="img2" class="plus-img"   :src="img2" mode="aspectFill"></image>
						<view v-if="img2" class="delete-btn"  @click.stop="removeImage(2)" ><image style="    width: 40rpx;height: 41rpx;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" ></image></view>
						<text v-else  class="iconfont icon-jia1" ></text>
					</view>
					<view class="plus-img d-flex d-flex-center d-flex-middle"  style="position: relative;" @click="addimg(3)">
						<image v-if="img3" class="plus-img" :src="img3" mode="aspectFill"></image>
						<view v-if="img3" class="delete-btn"  @click.stop="removeImage(3)" ><image style="    width: 40rpx;height: 41rpx;" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" ></image></view>
						<text v-else  class="iconfont icon-jia1" ></text>
					</view>
				</view>
				<view v-for="(record, index) in purpose" :key="index">
				<view class="d-flex d-flex-between d-flex-middle mb-2">
					<view class="d-flex d-flex-baseline" >
						<text class="font32 colorfff mr-1">{{ record.name }}</text>
					</view>
					
				</view>
				<view class="d-flex d-flex-wrap mb-2">
					<view class="xuanzhe" :class="selectedPurpose.some(selectedItem => selectedItem.id === item.id) ? 'onxz' : ''" v-for="(item,index) in record.items" :key="index" @click="choosePurpose(item,record.name)">{{item.name}}</view>
					
				</view>
				</view>
				<!-- <view class="d-flex d-flex-between d-flex-middle mb-2">
					<view class="d-flex d-flex-baseline">
						<text class="font32 colorfff mr-1">区服</text>
						<text class="font20 colorg7">（多选）</text>
					</view>
					
				</view>
				<view class="d-flex d-flex-wrap mb-5">
					<view class="xuanzhe">人皮话多</view>
					<view class="xuanzhe">情绪稳定</view>
					<view class="xuanzhe onxz">有趣灵魂</view>
					<view class="xuanzhe">全能高手</view>
				</view> -->
				
				
				<view class="d-flex d-flex-center">
					<view class="btn-edit d-flex d-flex-center d-flex-middle rounded50" @click="post">
						<text class="colorfff font32" >发布搭子卡</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	import { uploadImageApi } from '../../http/uploadImage';
	import { DictionaryApi } from "../../http/dictionary";
	import { goodsApi } from "../../http/goodsApi";
	import { userApi } from "../../http/userApi";
	import { DaziApi } from "../../http/Dazi";
	import {dateUtils} from '@/util/util.js';
	import store from '@/store/index.js';
		export default {
		data() {
			return {
				bgcolor:'transparent',
				chartData: {},
				img1:null,
				img2:null,
				img3:null,
				textareaContent:null,
				maxLength:50,//字数
				gameName:'',
				gameId:'',
				gameIcon:'',
				purposeParam:{
					pageIndex:1,
					pageSize:6,
					dictId:6,
				},
				Echarts: [60,60,80,70,90],
				character: "",
				topic: null,
				purpose:[],
				user:{},
				postParam:{
					
				},
				 selectedPurpose: [],//选择的目的
				opts: {
					color: ["#9A60B4","#ea7ccc","#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452"],
					padding: [0,0,0,0],
					dataLabel: false,
					enableScroll: false,
					width:100,
					height:100,
					fontSize: 10,
					//游戏卡内容
					legend: {
						show: false,
						position: "right",
						lineHeight: 25,
					},
					extra: {
						radar: {
							gridType: "radar",
							gridColor: "#334c7c",
							gridCount: 3,
							opacity: 6,
							max: 10,
							fontSize:10,
							labelShow: true,
							border: false,
						},
					}
				}
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 20) {
				this.bgcolor = '#74749c'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		onShow(){
			 const dataObj = uni.getStorageSync('data');
			 uni.removeStorageSync('data');
			 console.log(dataObj);
			 if(dataObj){
				 this.Echarts = dataObj.Echarts;
				 this.character = dataObj.character;
				 this.topic = dataObj.topic
			 }
		},
		onReady() {
			this.getServerData()
		},
		methods: {
			async getFilter(){
				const id=this.gameId;
				const param = {
					gameId:id
				}
				// this.filterParam.Gameld=this.gameId;
				let res=await goodsApi.queryGamesFilter(param);
				let recods=res.items;
				this.purpose=recods;
				console.log(this.purpose);
			},
			async getUser(){//用户信息
				let res= await userApi.getUserInfo();
				this.user=res;
			},

			async postCord(){
				let res = await DaziApi.postCord(this.postParam);
			},
			choosePurpose(item, name) {
				// 对所有类型都使用单选逻辑
				// 先移除同类型的已选项
				this.selectedPurpose = this.selectedPurpose.filter(selectedItem => selectedItem.typeName !== name);
				
				// 添加新选择的项
				this.selectedPurpose.push({ 
					id: item.id, 
					name: item.name, 
					typeName: name 
				});
			},
			gotoTestPage() {
				uni.navigateTo({
					url: '/pagesMain/edit-test/edit-test?id='+this.gameId+'&gameName='+this.gameName+'&gameIcon='+this.gameIcon
				})
			},
			async getPurposeDate(){//交友目的
				let res= await DictionaryApi.Dictionary(this.purposeParam);
				let recods=res.records;
				recods.forEach(record => {
					this.purpose.push(record);
				})
				console.log(this.purpose);
			},
			// choosePurpose(index){
			// 	const indexInSelected = this.selectedPurpose.indexOf(index);
			// 	    if (indexInSelected === -1) {
			// 	      this.selectedPurpose.push(index);
			// 	    } else {
			// 	      this.selectedPurpose.splice(indexInSelected, 1);
			// 	    }
			// },
			goBack(){
				manner.goBack()
			},
			removeImage(i){//移除图片
				if(i==1){
					this.img1='';
				}else if(i==2){
					this.img2='';
				}else if(i==3){
					this.img3='';
				}
			},
			uploadImage(imageInfo,i) {//上传图片
				if(i==1){
					uploadImageApi.Upload(imageInfo)
						.then(response => {
							this.img1 =response.data;
						})
						.catch(error => {
							console.error('图片上传失败', error);
						});
				}else if(i==2) {
					uploadImageApi.Upload(imageInfo)
					.then(response => {
						this.img2 =response.data;
					})
					.catch(error => {
						console.error('图片上传失败', error);
					});
				}else if(i==3) {
					uploadImageApi.Upload(imageInfo)
					.then(response => {
						this.img3 =response.data;
					})
					.catch(error => {
						console.error('图片上传失败', error);
					});
				}
			},
			getSelectedPurposeIds(name) {
				const selectedItem = this.selectedPurpose.find(item => item.typeName === name);
				return selectedItem ? selectedItem.id : '';
			},
			getSelectedPurposeNames(name) {
				const selectedItem = this.selectedPurpose.find(item => item.typeName === name);
				return selectedItem ? selectedItem.name : '';
			},
			
			post: dateUtils.debounce(function() {//发布游戏卡
			
			if(this.textareaContent==null||this.textareaContent==''){
				console.log(this.textareaContent);
				uni.showToast({
				    title: '你还没有输入内容',
				    icon: 'none', // 使用'none'图标，只显示文字
				    duration: 2000 // 显示持续时间
				  });
				
				}else{
					if(this.character==''){
						uni.showToast({
						    title: '你还没有完成交友测试',
						    icon: 'none', // 使用'none'图标，只显示文字
						    duration: 2000 // 显示持续时间
						  });
						
						
						
					}else{
					if(this.img1==null&&this.img2==null&&this.img3==null){
						uni.showToast({
						    title: '你还没有上传图片',
						    icon: 'none', // 使用'none'图标，只显示文字
						    duration: 2000 // 显示持续时间
						  });
					}else{
						if(this.selectedPurpose.length==0){
							uni.showToast({
							    title: '你还没有选择类型',
							    icon: 'none', // 使用'none'图标，只显示文字
							    duration: 2000 // 显示持续时间
							  });
						}else{
						
							const result = this.Echarts.join(',');
						this.postParam.gameId=this.gameId;
						this.postParam.gameName=this.gameName;
						// this.postParam.playerNickName=this.user.nickname;
						// this.postParam.playerId=this.user.uid;
						this.postParam.playerAbilityReport=this.character;
						this.postParam.makeFriendsId=this.getSelectedPurposeIds("交友目的");
						this.postParam.makeFriends=this.getSelectedPurposeNames("交友目的");	
						this.postParam.districtServerId=this.getSelectedPurposeIds("区服类型");
						this.postParam.districtServer=this.getSelectedPurposeNames("区服类型");	
						this.postParam.gameLevelId=this.getSelectedPurposeIds("段位名称");
						this.postParam.gameLevelName=this.getSelectedPurposeNames("段位名称");		
						this.postParam.onlineTimeId=this.getSelectedPurposeIds("在线时间");
						this.postParam.onlineTime=this.getSelectedPurposeNames("在线时间");
						this.postParam.personalityTypeId=this.getSelectedPurposeIds("搭子类型");
						this.postParam.personalityType=this.getSelectedPurposeNames("搭子类型");
						this.postParam.screenshot1=this.img1;
						this.postParam.screenshot2=this.img2;
						this.postParam.screenshot3=this.img3;
						this.postParam.remark=this.textareaContent;
						this.postParam.abilityTopic=this.topic;
						this.postParam.extra=result;
						
						console.log(this.postParam);
						this.postCord();
						uni.showToast({
						    title: '搭子卡发布成功，正在审核',
						    icon: 'none', // 使用'none'图标，只显示文字
						    duration: 2000 // 显示持续时间
						  });
						  setTimeout(() => {
						  	uni.navigateBack({
						  		delta: 1
						  	});
						  },1000)
						 
						
						
						
						}
					}
				}
				
			}
			
			}, 1000),
			addimg(i){
				const vm = this;
				
							uni.chooseImage({
								count: 1, //默认9
								sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
								sourceType: ['album'], //从相册选择
								success:(res) =>{
									if (res.tempFilePaths.length > 0) {
										let img = res.tempFilePaths[0];
										console.log(img); 
										vm.uploadImage(img,i);
									}
								}
							})
						
				
			
			
			},
			getServerData() {
			  setTimeout(() => {
			    let res = {
			        categories: ["素质","情绪","技术","热情","综合"],
			        series: [
			          {
			            name: "",
			            data: this.Echarts
			          }
			        ]
			      };
			    this.chartData = JSON.parse(JSON.stringify(res));
			  }, 500);
			},
		},
		 onLoad(options) {
			this.gameId=options.id;
			this.gameName=decodeURIComponent(options.name);
			this.gameIcon=decodeURIComponent(options.icon);
			// this.getPurposeDate();
			// if(options.Echarts) {
			// 	this.Echarts = JSON.parse(options.Echarts)
			// }
			// if(options.character) {
			// 	this.character = JSON.parse(options.character)
			// }
			console.log(this.Echarts,this.character);
			this.getFilter();
			this.getUser();
		}
	}
</script>

<style scoped>
.delete-btn {
  position: absolute;
   opacity: 0.75;
 top: 6rpx;
    right: -17rpx;
	left: 140rpx;
  width: 40rpx; /* 增加圆的尺寸 */
  height: 40rpx; /* 增加圆的尺寸 */
  background-color: white;
  display: flex; /* 使用Flexbox布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  border-radius: 50%; /* 圆形 */
  cursor: pointer;
}	
.emain{
	background: #74749c;
	min-height: 100vh;
	position: relative;
}
.charts-box {
	width: 300rpx;
	height: 300rpx;
}
.color739bce{color:#739bce}
.color597bac{color:#597bac}
.bgC7C8C9{background: #4b5f87;width: 170rpx;}
.plus-img{
	width: 180rpx;
	height: 180rpx;
	border-radius: 36rpx;
	
	background-color: #1e3767;
	   overflow: scroll;
	color: #385fa5;
}
.colorg7{
	color: rgba(255, 255, 255, .5)
}
.xuanzhe{
	border: 1px solid #C7C8C9;
	border-radius: 30rpx;
	padding:10rpx 20rpx;
	color: #ffffff;
	font-size: 26rpx;
	margin-right: 19rpx;
	margin-bottom: 20rpx;
}
.onxz{
	background: #CFF0FB;
	color: #46C4FF;
}
.btn-edit{
	background-image: linear-gradient(to right, #e65fd0, #69adf8);
	height: 90rpx;
	width: 430rpx;
}
</style>

